<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
		
		<!-- 使用 Object.freeze() 会阻止修改现有属性，也意味着响应系统无法再追踪变化。 -->
		<div id="app">
			<p>{{ foo }}</p>
			<!-- 这里的 ’foo‘ 不会更新 -->
			<button v-on:click="foo = 'baz'">Change it</button>
			
			/*在布尔特性的情况下，它们的存在即暗示 true，v-bind 工作起来略有不同，在下例中的
			isButtonDisabled 的值是 nill、 undefined、或false，disabled 特性不会被渲染出来。
			*/
			<button v-bind:disabled="isButtonDisabled">Button</button>
			
		</div>
		
		
		<script src="exercise.js"></script>
		
	</body>
</html>
